<template>
  <view class="container">
 
    <view class="status-header">
      <text class="status-text"> {{ getPaymentStatus(orderData.data.paymentStatus) }} </text>
      <text class="reason-text">{{ getPaymentStatusText(orderData.data.paymentStatus) }}</text>
    </view>

    <!-- 2. 商品信息 -->
    <view class="section-box">
      <view class="section-header">
		   <view class="store-info">
		      <!--  <image class="store-icon" :src="orderData.products[0].image" mode="aspectFill"/> -->
		        <text class="store-name">{{orderData.data.store.storeName}}</text>
		      </view>
        <text class="order-no">订单：{{orderData.data.documentNumber}}</text>
      </view>

      <!-- 商品列表 -->
      <view 
        class="product-item" 
        v-for="(item, index) in orderData.data.salesOrderDetail" 
        :key="index"
      >
        <image class="product-img" :src="item.product.productImageUrl" mode="aspectFill"/>
        <view class="product-info">
          <text class="product-name">{{item.product.productName}}</text>
          <view class="spec-row">
            <text class="spec-text">规格：{{item.product.productSpecifications}}</text>
            <text class="price">￥{{item.product.retailPrice}}</text>
          </view>
          <text class="quantity">x{{item.quantity}}</text>
        </view>
      </view>

      <!-- 费用明细 -->
      <view class="fee-detail">
        <view class="fee-item">
          <text>商品金额</text>
          <text>￥{{calculateTotal()}}</text>
        </view>
        <view class="fee-item">
          <text>包装费</text>
          <text>￥0</text>
        </view>
        <view class="fee-item">
          <text>配送费</text>
          <text>￥0</text>
        </view>
        <view class="total-row">
          <text>应付总额</text>
          <text class="total-price">￥{{calculateTotal()}}</text>
        </view>
      </view>
    </view>

    <!-- 3. 配送信息 -->
    <view class="section-box">
      <view class="section-title">配送信息</view>
      <view class="info-item">
        <text>收货人</text>
        <text></text>
      </view>
	  <view class="info-item">
	    <text>手机号</text>
	    <text></text>
	  </view>
      <view class="address-box">
        <text class="address-label">收货地址</text>
        <text class="address-text"></text>
      </view>
    </view>

    <!-- 4. 订单信息 -->
    <view class="section-box">
      <view class="section-title">订单信息</view>
      <view class="info-grid">
        <text>订单号码</text>
        <text>{{orderData.data.documentNumber}}</text>
        <text>下单时间</text>
        <text>{{formatDateTime(orderData.data.createdAt)}}</text>
        <text>支付方式</text>
        <text>在线支付</text>
        <text>订单备注</text>
        <text>{{orderData.data.remarks}}</text>
      </view>
    </view>

    <!-- 5. 底部操作栏 -->
    <view class="action-bar">
      <button class="btn delete">删除订单</button>
      <button class="btn contact">联系客服</button>
      <button class="btn reorder">再来一单</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'



 const orderId  = ref('');
 const orderData = ref('')
 
 const isLoading = ref(true) // 新增加载状态
 
 onLoad((options) => {
   orderId.value = options
   fetchData()
 })
 
 const fetchData = async () => {
   try { 
     // 显示加载提示
     uni.showLoading({
       title: '加载中...',
       mask: true
     })
 
     const res = await uni.request({
       url: 'http://127.0.0.1:15000/SALE-SERVICE/sale/listOrderByOrderId',
       method: 'GET',
       data: { id: orderId.value.id }
     })
 
     if (res.data.data.code === 200) {
       orderData.value = res.data.data
     } else {
       uni.showToast({ title: '数据加载失败', icon: 'none' })
     }
   } catch (error) { 
     uni.showToast({ title: '请求异常', icon: 'none' })
     console.error('请求错误:', error)
   } finally {
     uni.hideLoading()
     isLoading.value = false
   }
 }
 
 const calculateTotal = () => {
   if (!orderData.value.data?.salesOrderDetail) return '0.00'
   return orderData.value.data.salesOrderDetail.reduce((sum, item) => {
     return sum + (item.unitPrice * item.quantity)
   }, 0).toFixed(2)
 }
 
 
 const  formatDateTime = (isoString) => {
  if (!isoString) return ''

  const date = new Date(isoString)
  
  // 补零函数
  const pad = (n) => n.toString().padStart(2, '0')

  return `${date.getFullYear()}年
          ${pad(date.getMonth() + 1)}月
          ${pad(date.getDate())}日 
          ${pad(date.getHours())}:
          ${pad(date.getMinutes())}:
          ${pad(date.getSeconds())}`
          .replace(/\s+/g, ' ') // 去除换行空格
}
 
 
 
 
// onLoad((options) => {
 
// 	orderId.value = options
// 	 console.log('接收的订单参数:', orderId.value )
// 	fetchData()
// })


// // 数据请求方法
// const fetchData = async () => {

//   try { 
//     const res = await uni.request({
//       url: 'http://127.0.0.1:15000/SALE-SERVICE/sale/listOrderByOrderId',
//       method: 'GET',
//       data: { id: orderId.value.id }
//     })

    
//     if (res.data.data.code === 200) {
//       orderData.value = res.data.data
// 	  console.log(orderData.value)
//     }
	
    
//   } catch (error) { 
//     uni.showToast({ title: '数据加载失败', icon: 'none' })
//     console.error('请求错误:', error)
    
//   }
// }

const getPaymentStatus = (status) => {
  const statusMap = {
    1: '待付款',
    2: '代发货',
    3: '配送中',
    4: '代收货',
	5: '已收货'
  }
  return statusMap[status]
}


const getPaymentStatusText = (status) => {
  const statusTextMap = {
    1: '请支付订单',
    2: '商家发货中',
    3: '物流配送中',
    4: '请确认收货',
	5: '商品已收货'
  }
  return statusTextMap[status]
}


</script>

<style lang="scss" scoped>
/* 基础容器 */
.container {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 140rpx;
}

/* 1. 状态栏 */
.status-header {
	
  background: white;
  padding: 40rpx 30rpx;
  margin: 20rpx;
  
 
 border-radius: 12rpx;
  .status-text {
    font-size: 42rpx;
    font-weight: 500;
    display: block;
    margin-bottom: 10rpx;
  }

  .reason-text {
    font-size: 28rpx;
    opacity: 0.9;
  }
}

/* 2. 商品信息 */
.section-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
  background: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
  .info-item{
	  margin-top: 10px;
	  display: flex;
	  justify-content: space-between;
  }

  .section-header {
   display: flex;
    justify-content: space-between; /* 左右两侧对齐 */
    align-items: center; /* 垂直居中 */
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #eee;
	
	
	.store-info {
    display: flex;
    align-items: center;
    gap: 15rpx; /* 元素间距 */

    .store-icon {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50rpx;
    }

    .store-name {
      font-size: 30rpx;
      color: #333;
    }
  }

  .order-no {
    font-size: 28rpx;
    color: #666;
  }
  }
}

.product-item {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border: none;
  }

  .product-img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }

  .product-info {
    flex: 1;

	

    .product-name {
      font-size: 30rpx;
      color: #333;
      line-height: 1.4;
    }

    .spec-row {
      display: flex;
      justify-content: space-between;
      margin: 20rpx 0;
    }

    .spec-text {
      font-size: 26rpx;
      color: #999;
    }

    .price {
      font-size: 30rpx;
      color: #e53b03;
    }

    .quantity {
      font-size: 28rpx;
      color: #666;
    }
  }
}

.fee-detail {
  padding-top: 30rpx;

  .fee-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25rpx;
    font-size: 28rpx;
    color: #666;
  }

  .total-row {
    display: flex;
    justify-content: space-between;
    margin-top: 35rpx;
    padding-top: 30rpx;
    border-top: 1rpx solid #eee;
    font-size: 32rpx;

    .total-price {
      color: #e53b03;
      font-weight: bold;
    }
  }
}

.section-title{
	font-size: 17px;
}
/* 3. 配送信息 */
.address-box {
  margin-top: 30rpx;

  .address-label {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 15rpx;
  }

  .address-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
}

/* 4. 订单信息 */
.info-grid {
	margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 25rpx;
  font-size: 28rpx;

  > text:nth-child(odd) {
    color: #666;
  }

  > text:nth-child(even) {
    color: #333;
    text-align: right;
  }
}

/* 5. 底部操作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  gap: 20rpx;
  border-top: 1rpx solid #eee;

  .btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    transition: all 0.2s;

    &.delete {
      background: #fff;
      color: #666;
      border: 1rpx solid #ddd;
    }

    &.contact {
      background: #fff;
      color: #007aff;
      border: 1rpx solid #007aff;
    }

    &.reorder {
      background: #007aff;
      color: #fff;
    }
  }
  
}
</style>